<template>
  <el-table :data="this.tableData[this.field_key]" :border="model=='input' ? true : false" resizable size="mini" :name="field_key" @selection-change="handleSelectionChange" :span-method="arraySpanMethod">
    <template v-if="selection">
      <el-table-column type="selection" width="55"></el-table-column>
    </template>
    <template v-for="(item,index) in config">
      <table-item :data="config[index]" :name="field_key"></table-item>
    </template>
  </el-table> 
</template>
<script type="text/javascript">
import TableItem from './TableItem.vue'
import TableConfig from './config.js'


//通过命名空间的方式映入
import { createNamespacedHelpers } from 'vuex'
//获取需要管理的方法
const { mapState, mapActions, mapMutations } = createNamespacedHelpers('synthesize')


export default {
  name:"tablebase",
  props: {
    // 表格基本配置
    config: {
      type: [Array, Object],
      default: function() {
        return TableConfig
      }
    },
    // 增删改查API
    init:{
      type:[Array,Object],
      default:function(){
          return {
            "total": {model:"",action:""},
            "get": {model:"",action:""},
            "edit": {model:"",action:""}
          }
      }
    },
    mak: [Number, String],
    value: [Array, Object]
  },

  inject:['field_key','selection','model'],
  components: {
    "table-item": TableItem,
  },
  data() {
    return {
        // fieldKey:'',
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed:{
      ...mapState(['tableData']),
      data(){
        var obj = {};
        console.log(typeof this.tableData[this.field_key]);
        console.log(this.tableData[this.field_key])
        // return this.tableData[this.field_key].push(obj);
      }
  },
  /**
   * 数据监听
   * @type {Object}
   */
  watch: {

  },
  created(){

  },

  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    this.setURL({key:this.field_key,value:this.init});
    this.getTableData(this.field_key);
    this.getPageTotal(this.field_key);
  },

  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    ...mapMutations(['setURL']),
    ...mapActions(['getTableData', 'getPageTotal']),

    /**
     * 多选批量数据
     * @return {[type]} [description]
     */
    handleSelectionChange(data){
      this.$emit('input',data);

      console.log('批量数据',data);
    },

    /**
     * 合并单元格
     * @return {[type]} [description]
     */
    arraySpanMethod({ row, column, rowIndex, columnIndex }){
      // if (rowIndex % 2 === 0) {
      //   if (columnIndex === 0) {
      //     return [1, 2];
      //   } else if (columnIndex === 1) {
      //     return [0, 0];
      //   }
      // }
    }
  }
}

</script>
<style type="text/css" lang="scss">

</style>
